<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/all.css" />
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/jquery.touchSlider.js"></script>
    <script src="js/self.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
//            图片滑动
            $dragBln = false;
            $(".main_image").touchSlider({
                flexible : true,
                speed : 200,
                btn_prev : $("#btn_prev"),
                btn_next : $("#btn_next"),
                paging : $(".flicking_con a"),
                counter : function (e){
                    $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
                }
            });

            $(".main_image").bind("mousedown", function() {
                $dragBln = false;
            });

            $(".main_image").bind("dragstart", function() {
                $dragBln = true;
            });

            $(".main_image a").click(function(){
                if($dragBln) {
                    return false;
                }
            });
            $(".main_visual").hover(function(){
//                clearInterval(timer);
            },function(){
                timer = setInterval(function(){
                    $("#btn_next").click();
                },5000);
            });

            $(".main_image").bind("touchstart",function(){
                clearInterval(timer);
            }).bind("touchend", function(){
                timer = setInterval(function(){
                    $("#btn_next").click();
                }, 5000);
            });

            //            进度条
            $(".bar_span").each(function () {
                var ress = $(this).attr('width');
                var len=ress+"%";
                console.log(len);
                $(this).animate({
                    width:len
                });

            })



        });
    </script>
</head>
<body  ontouchstart="">
    <div class="container jz">
        <div class="main_visual">
            <div class="flicking_con w100">
                <div class="jz">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                </div>
            </div>
            <div class="main_image">
                <ul>
                    <li><span class="img_4"></span></li>
                    <li><span class="img_3"></span></li>
                    <li><span class="img_1"></span></li>
                    <li><span class="img_2"></span></li>
                    <li><span class="img_5"></span></li>
                </ul>
                <!--<a href="javascript:;" id="btn_prev"></a>-->
                <!--<a href="javascript:;" id="btn_next"></a>-->
            </div>
        </div>
        <style>
            .main_image li .img_1{background:url('images/img_main_1.jpg') center top no-repeat;background-size: cover;}
            .main_image li .img_2{background:url('images/img_main_2.jpg') center top no-repeat;background-size: cover;}
            .main_image li .img_3{background:url('images/img_main_3.jpg') center top no-repeat;background-size: cover;}
            .main_image li .img_4{background:url('images/img_main_4.jpg') center top no-repeat;background-size: cover;}
            .main_image li .img_5{background:url('images/img_main_5.jpg') center top no-repeat;background-size: cover;}
        </style>
        <!--main_visual-->
        <nav  class="w100">
            <div class="w100 clearfix of">
                <a href="classification.html">
                    <img src="images/keji.png" class="navImg keji">
                    <i>科技</i>
                </a>
                <a href="classification.html">
                    <img src="images/jiankang.png" class="navImg jiankang">
                    <i>健康</i>
                </a>
                <a href="classification.html">
                    <img src="images/jiadian.png" class="navImg jiadian">
                    <i>家电</i>
                </a>
                <a href="classification.html">
                    <img src="images/sheji.png" class="navImg sheji">
                    <i>设计</i>
                </a>
            </div>
            <div class="w100 clearfix of">
                <a href="classification.html">
                    <img src="images/yule.png" class="navImg yule">
                    <i>娱乐</i>
                </a>
                <a href="classification.html">
                    <img src="images/chuban.png" class="navImg chuban">
                    <i>出版</i>
                </a>
                <a href="classification.html">
                    <img src="images/gongyi.png" class="navImg gongyi">
                    <i>公益</i>
                </a>
                <a href="classification.html">
                    <img src="images/qita.png" class="navImg qita">
                    <i>其他</i>
                </a>
            </div>

        </nav>
        <section class=" w100 of" style="margin: 14px auto 6px;">
            <a class="fl indexKindLable f18"><img src="images/modox.png" class="dib pr">科技</a>
            <a href="#" class="indexKindMore fr f14 tc">更多...</a>
        </section>
        <section class="proSection pr w100 bcf" onclick=window.location.href="productDetail.html"> 
            <div class="proTittle pa w100">
               <div class="of clearfix w100">
                  <span class="fl">众筹中</span>
                   <a href="#" class="fr f12"><img src="images/zan.png" class="zan dib hauto pr">235</a>
               </div>
            </div>
            <a href="#" class="proImg db w100 of">
                <img src="images/watch.png" class="db w100 h100">
            </a>
            <a class="proName db of clearfix">
                <span class="fl">项目名称...</span>
                <i class="fr">发布众筹公司名称</i>
            </a>
            <a class="proMoney db of clearfix">
                <span class="fl">￥296.00</span>
                <i class="fr">89.9 %</i>
            </a>
            <a class="progress db"><div class="bar_span" width="89.9"></div></a>
            <a class="proDetail db of clearfix">
               <div class="fl tl" style="width: 45%">
                   <span class="db f14">￥20000000.00</span>
                   <i class="db f12">目标</i>
               </div>
                <div class="fl tl" style="width: 35%">
                    <span class="db f14">￥17999990.00</span>
                    <i class="db f12">已筹</i>
                </div>
                <div class="fl tc" style="width: 20%">
                    <span class="db f14">19&nbsp;天</span>
                    <i class="db f12">剩余</i>
                </div>
            </a>
        </section>
        <section class="proSection pr w100 bcf" onclick=window.location.href="productDetail.html">
            <div class="proTittle pa w100">
               <div class="of clearfix w100">
                  <span class="fl">众筹中</span>
                   <a href="#" class="fr f12"><img src="images/zan.png" class="zan dib hauto pr">235</a>
               </div>
            </div>
            <a href="#" class="proImg db w100 of">
                <img src="images/umbrella.png" class="db w100 h100">
            </a>
            <a class="proName db of clearfix">
                <span class="fl">项目名称...</span>
                <i class="fr">发布众筹公司名称</i>
            </a>
            <a class="proMoney db of clearfix">
                <span class="fl">￥296.00</span>
                <i class="fr">50 %</i>
            </a>
            <a class="progress db"><div class="bar_span" width="50"></div></a>
            <a class="proDetail db of clearfix">
               <div class="fl tl" style="width: 45%">
                   <span class="db f14">￥20000000.00</span>
                   <i class="db f12">目标</i>
               </div>
                <div class="fl tl" style="width: 35%">
                    <span class="db f14">￥17999990.00</span>
                    <i class="db f12">已筹</i>
                </div>
                <div class="fl tc" style="width: 20%">
                    <span class="db f14">19&nbsp;天</span>
                    <i class="db f12">剩余</i>
                </div>
            </a>
        </section>
    </div>

    <footer class="footerTab w100 of pf">
        <a onclick="window.location.href='index.html'" href="javascript:void(0);" class="footerTab_current">
            <img src="images/zhongchou2.png" class="db jz">
            <span class="db tc">商城</span>
        </a>
        <a onclick="window.location.href='baitiao.html'" href="javascript:void(0);">
            <img src="images/f2.png" class="db jz" style="width: 25px;">
            <span class="db tc">白条</span>
        </a>
        <a onclick="window.location.href='moneyManagement.html'" href="javascript:void(0);">
            <img src="images/f3.png" class="db jz" style="width: 27px;">
            <span class="db tc">理财</span>
        </a>
        <a onclick="window.location.href='rankingList.html'"  href="javascript:void(0);">
            <img src="images/f4.png" class="db jz" style="width: 27px;">
            <span class="db tc">排行</span>
        </a>
        <a onclick="window.location.href='personalAll.html'" href="javascript:void(0);">
            <img src="images/f5.png" class="db jz" style="width: 25px;">
            <span class="db tc">我的</span>
        </a>
    </footer>

</body>
</html>